<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>循环结构</title>
	</head>
	
	<body>
		<div id="app">
			<h1>循环结构</h1>
			<!-- 指定午饭数组,之后循环遍历输出 -->
			<h3 v-for="item in lunch">{{item}}</h3>
			<!-- 获取数组下标 -->
			<h3 v-for="(item,index) in lunch">{{index}} ---- {{item}}</h3>
			
			<h1>遍历数组对象</h1>
			<p v-for="user in list">
				id号: {{user.id}} | 名称: {{user.name}}
			</p>
		</div>
		
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					lunch: ['宫保鸡丁','爆炒腰花','土豆片','土豆丝','土豆泥'],
					list: [
						{id: 1, name: "张三"},
						{id: 2, name: "李四"},
						{id: 3, name: "王五"}
					]
				},
				methods:{
				}
			})
		</script>
	</body>
</html>